<template>
  <div class="dashboard-container">
    <!-- Token调试器 -->
    <TokenDebugger class="token-debugger-wrapper" />
    
    <!-- 页面标题和操作区 -->
      <div class="dashboard-title-bar">
        <div>
          <h1 class="dashboard-title">数据仪表盘</h1>
          <p class="dashboard-desc">查看和管理系统关键数据指标</p>
        </div>
        <div class="dashboard-actions">
          <el-button icon="Download" size="small">导出数据</el-button>
          <el-button icon="Refresh" type="primary" size="small">刷新数据</el-button>
        </div>
      </div>

      <!-- 统计卡片区 -->
      <el-row :gutter="20" class="dashboard-cards">
        <el-col :span="6">
          <el-card shadow="hover">
            <div class="card-meta">
              <div class="card-label">总用户数</div>
              <div class="card-value">24,589</div>
              <div class="card-trend success"><el-icon><ArrowUp /></el-icon> 12.5% <span>较上月</span></div>
            </div>
            <el-icon class="card-icon"><User /></el-icon>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover">
            <div class="card-meta">
              <div class="card-label">今日访问量</div>
              <div class="card-value">1,284</div>
              <div class="card-trend success"><el-icon><ArrowUp /></el-icon> 8.2% <span>较昨日</span></div>
            </div>
            <el-icon class="card-icon"><View /></el-icon>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover">
            <div class="card-meta">
              <div class="card-label">平均响应时间</div>
              <div class="card-value">187ms</div>
              <div class="card-trend danger"><el-icon><ArrowUp /></el-icon> 3.1% <span>较昨日</span></div>
            </div>
            <el-icon class="card-icon"><Timer /></el-icon>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover">
            <div class="card-meta">
              <div class="card-label">系统状态</div>
              <div class="card-value">正常</div>
              <div class="card-trend success"><el-icon><CircleCheck /></el-icon> 无异常记录</div>
            </div>
            <el-icon class="card-icon"><CircleCheck /></el-icon>
          </el-card>
        </el-col>
      </el-row>

      <!-- 图表区 -->
      <el-row :gutter="20" class="dashboard-charts">
        <el-col :span="16">
          <el-card shadow="hover" class="chart-card">
            <div class="chart-title-bar">
              <span class="chart-title">访问趋势分析</span>
              <el-button-group>
                <el-button size="small">日</el-button>
                <el-button size="small">周</el-button>
                <el-button size="small">月</el-button>
                <el-button size="small">年</el-button>
              </el-button-group>
            </div>
            <div class="chart-placeholder">[趋势图表占位]</div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card shadow="hover" class="chart-card">
            <div class="chart-title-bar">
              <span class="chart-title">用户分布</span>
              <el-link type="primary" :underline="false">查看详情</el-link>
            </div>
            <div class="chart-placeholder">[用户分布图表占位]</div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 数据表格区 -->
      <el-card class="dashboard-table-card" shadow="hover">
        <div class="table-title-bar">
          <span class="table-title">最近活动</span>
          <el-input placeholder="搜索活动..." size="small" prefix-icon="Search" class="table-search" />
        </div>
        <el-table :data="activityData" style="width: 100%">
          <el-table-column prop="user" label="用户" width="120" />
          <el-table-column prop="type" label="活动类型" width="120" />
          <el-table-column prop="time" label="时间" width="180" />
          <el-table-column prop="status" label="状态" width="100">
            <template #default="scope">
              <el-tag :type="scope.row.status === '成功' ? 'success' : (scope.row.status === '失败' ? 'danger' : 'warning')">
                {{ scope.row.status }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120">
            <template #default>
              <el-link type="primary" :underline="false">详情</el-link>
              <el-link type="info" :underline="false">日志</el-link>
            </template>
          </el-table-column>
        </el-table>
        <div class="table-pagination">
          <el-pagination layout="prev, pager, next" :total="24" :page-size="4" small />
        </div>
      </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import {
  ArrowUp,
  View,
  Timer,
  CircleCheck,
  Download,
  Refresh,
  Search,
  User
} from '@element-plus/icons-vue'
import TokenDebugger from '../components/TokenDebugger.vue'

const activityData = ref([
  { user: '张三', type: '数据导出', time: '2023-06-15 14:30:22', status: '成功' },
  { user: '李四', type: '系统配置修改', time: '2023-06-15 13:45:11', status: '成功' },
  { user: '王五', type: '批量操作', time: '2023-06-15 11:20:35', status: '部分成功' },
  { user: '赵六', type: '数据导入', time: '2023-06-15 09:15:42', status: '失败' },
])
</script>

<style scoped>
.dashboard-container {
  width: 100%;
}
.dashboard-title-bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}
@media (min-width: 768px) {
  .dashboard-title-bar {
    flex-direction: row;
    align-items: center;
  }
}
.dashboard-title {
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--el-text-color-primary);
}
.dashboard-desc {
  font-size: 14px;
  margin: 0;
  color: var(--el-text-color-secondary);
}
.dashboard-actions {
  display: flex;
  gap: 12px;
}
.dashboard-cards {
  margin-bottom: 24px;
}
.card-meta {
  flex: 1;
}
.card-label {
  font-size: 14px;
  color: var(--el-text-color-secondary);
  margin-bottom: 8px;
}
.card-value {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--el-text-color-primary);
}
.card-trend {
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.card-trend.success {
  color: var(--el-color-success);
}
.card-trend.danger {
  color: var(--el-color-danger);
}
.card-trend span {
  color: var(--el-text-color-secondary);
  font-size: 12px;
}
.card-icon {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 32px;
  opacity: 0.8;
}
.dashboard-charts {
  margin-bottom: 24px;
}
.chart-card {
  height: 320px;
}
.chart-title-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.chart-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--el-text-color-primary);
}
.chart-placeholder {
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--el-border-color);
  border-radius: 4px;
  color: var(--el-text-color-secondary);
}
.dashboard-table-card {
  margin-top: 0;
  padding: 0;
}
.table-title-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.table-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--el-text-color-primary);
}
.table-search {
  width: 240px;
}
.table-pagination {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
}

.token-debugger-wrapper {
  margin-bottom: 32px;
}
</style> 